<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>工具安装</el-breadcrumb-item>
  </el-breadcrumb>
  <el-table :data="tableData" width="80%" @row-click="getRowInfo" highlight-current-row
    :cell-class-name="tableCellClassName">
    <el-table-column prop="id" type="index" width="55" />
    <el-table-column prop="hostIp" label="主机IP"></el-table-column>
    <el-table-column prop="isHttpdFlag" label="yum 服务" width="120" style="{color:{{ colorRef }}}"
      :formatter="formatter"></el-table-column>
    <el-table-column prop="yumFlag" label="yum源" width="120" :formatter="formatter"></el-table-column>
    <el-table-column prop="jdkFlag" label="JDK" width="120" :formatter="formatter"></el-table-column>
    <el-table-column prop="isSysLibFlag" label="系统工具" width="120" :formatter="formatter"></el-table-column>
    <el-table-column prop="isNtpdFlag" label="NTPD Server" width="120" :formatter="formatter"></el-table-column>
    <el-table-column prop="isNtpdClientFlag" label="NTPD Client" width="120" :formatter="formatter"></el-table-column>
  </el-table>

  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"
    v-loading="toolsLoading">

    <div class="flex-grow" />
    <el-menu-item index="1" @click="autoInstallStart()">
      <el-icon>
        <UploadFilled />
      </el-icon>自动安装
    </el-menu-item>
  </el-menu>
</template>
 
<script>
import { ref, reactive, toRef } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import axios from 'axios';
import global from '../components/Global.vue';

const state = reactive({
  color: "black"
});

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  setup() {
    const tableData = ref([
      {
        hostIp: '192.168.152.104',
        isHttpdFlag: 1,
        jdkFlag: 1,
        isSysLibFlag: 1
      }
    ]);

    const toolsLoading = ref(false);
    const colorRef = toRef(state, "color");
    const formatter = (row, column, cellValue) => {
      //row每行的内容 column每一列的属性信息 cellValue单元格的值
      if (cellValue === 0) { //不包含值为 0 的情况 另做判断
        colorRef.value = "red";
        return 'X';
      } else if (cellValue === 1) { //cellValue会自动将0值过滤出来不展示 单独做判断
        colorRef.value = "green";
        return '✔';
      } else {
        colorRef.value = "black";
        return '-' //没有值时展示 --
      }
    };

    return {
      tableData,
      formatter,
      toolsLoading
    };
  },
  created() {
    this.loadTableData();
  },
  data() {
    return {
      baseUrl: global.baseUrl,
      autoStartUrl: global.baseUrl+'/install/autoStart',
      listUrl: global.baseUrl+'/host/list',
      radio: "",
      rowInfo: {}
    }
  },
  methods: {
    autoInstallStart() {
      if (!this.rowInfo.hostIp) {
        this.$message({
          message: "请选择ntpd server主机.",
          type: 'warning'
        });
        return;
      }
      console.log('自动优化开始......\n不需要参数，服务自行查询主机进行优化。');

      this.toolsLoading = true;
      axios.put(this.autoStartUrl, this.rowInfo, global.config)
        .then((response) => {
          //console.info(response.data.data);
          this.$message({
            message: "自动安装成功",
            type: "success"
          });
          this.toolsLoading = false;
          this.tableData = response.data.data;
        })
        .catch((error) => {
          this.$message({
            message: "自动安装异常",
            type: "error"
          })
          console.error(error);
          this.toolsLoading = false;
        });
    },
    loadTableData() {
      axios.get(this.listUrl)
        .then((response) => {
          console.log(response.data);
          this.tableData = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    getRowInfo(row) {
      //console.info(row.id, row);
      this.radio = row.id;
      this.rowInfo = row;
    }
  }
};
</script>

<style>
.el-table {
  margin: 3px auto;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
  